<template>
	<scroll-view @scrolltolower="handleToLower" scroll-y class="recommend_view" v-if="recommends.length>0">
		<!-- 推荐开始 -->
		<view class="recommend_wrap">
			<navigator class="recommend_item" 
			v-for="item in recommends" 
			:url="`/pages/album/album?id=${item.target}`" 
			:key="item.id">
				<image mode="widthFix" :src="item.thumb"></image>
			</navigator>
		</view>
		<!-- 推荐结束 -->
		
		<!-- 月份开始 -->
		<view class="months_wrap">
			<view class="months_title">
				<view class="months_title_info">
					<view class="months_info">
						<text>{{monthes.DD}}/</text>
						{{monthes.MM}} 月
					</view>
					<view class="months_text">{{monthes.title}}</view>
				</view>
				<view class="months_title_more">更多 ></view>
			</view>
			<view class="months_content">
				<view class="months_item" v-for="(item,index) in monthes.items" :key="item.id">
					<go-detail :list="monthes.items" :index="index">
						<image :src="item.thumb+item.rule.replace('$<Height>',360)" mode="aspectFill"></image>
					</go-detail>
				</view>
			</view>
		</view>
		<!-- 月份结束 -->
		
		<!-- 热门开始 -->
		<view class="hots_wrap">
			<view class="hots_title">
				<text> 热门 </text>
			</view>
			<view class="hots_content">
				<view class="hot_item" v-for="(item,index) in hots" :key="item.id">
					<go-detail :list="hots" :index="index">
						<image :src="item.thumb" mode="widthFix"></image>
					</go-detail>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import dateForMat from '@/utils/DateFormat.js'
	import goDetail from '../../../components/goDetail.vue'
	export default {
		components:{
			goDetail
		},
		mounted() {
			// 修改页面标题
			uni.setNavigationBarTitle({
				title:"推荐"
			})
		},
		data() {
			return {
				// 推荐列表
				recommends: [],
				// 月份
				monthes: {
					items: []
				},
				// 热门
				hots:[],
				// 请求的参数
				params:{
					limit: 30,
					order: 'hot',
					skip: 0
				},
				// 是否还有下一页
				hasMore:true
			}
		},
		methods: {
			// 滚动条触底事件
			handleToLower(){
				//1.修改参数 skip+=limit  初始跳过0条，即从头开始获取，然后下一次触发触底事件就跳过30条
				// 2.重新发送请求 getList()
				// 3.请求回来之后 hots数据应该叠加
				this.params.skip+=this.params.limit;
				this.getList();
			},
			getList(){
				this.request({
					url: '/v3/homepage/vertical',
					data: this.params
				}).then(result => {
					// 第一次请求才会调用,先把推荐跟日历给显示了
					if(this.recommends.length===0){
						// 推荐模块
						this.recommends = result.res.homepage[1].items;
						// 月份模块
						this.monthes = result.res.homepage[2];
						// 将时间戳改为18/01月的形式
						this.monthes.MM = dateForMat().M;
						this.monthes.DD = dateForMat().D;
					}
					
					// 请求前判断还有没有下一页数据
					if(result.res.vertical.length === 0){
						this.hasMore=false
						return;
					}
					
					// 获取热门数据列表
					// 数据拼接
					if(this.hasMore){//默认是有数据
						this.hots=[...this.hots,...result.res.vertical]
					}else{
						uni.showToast({
							title:"没有数据了",
							icon:"none"//不显示图表
						})
					}
					
				})
			}
		},
		created(){
			this.getList();
		}
	}
</script>

<style lang="scss" scoped>
	.recommend_view {
		// height:屏幕的高度(不同的手机高度不同，不能写死)-头部标题的高度  calc减号之间必须有空格
		// #ifdef H5
		height: calc( 100vh - 130px );
		// #endif
		
		// #ifndef H5
		height: calc( 100vh - 36px );
		// #endif
	}
	.recommend_wrap {
		// flex布局
		display: flex;
		// 换行属性
		flex-wrap: wrap;

		.recommend_item {
			// 每个宽占50%
			width: 50%;
			// border占用的是item内部的 不是外部在加上一圈
			border: 3rpx solid #FFFFFF;
		}
	}

	.months_wrap {
		.months_title {
			// 伸缩盒子
			display: flex;
			// 两端对齐，平均分剩余部分
			justify-content: space-between;
			// 内边距
			padding: 20rpx;

			.months_title_info {
				color: $color;
				font-size: 30rpx;
				font-weight: 600;
				display: flex;

				.months_info {
					text {
						font-size: 36rpx;
					}
				}

				.months_text {
					font-size: 34rpx;
					color: #666;
					margin-left: 30rpx;
				}
			}

			.months_title_more {
				font-size: 24rpx;
				color: $color;
			}
		}

		.months_content {
			display: flex;
			flex-wrap: wrap;
			.months_item{
				width: 33.33%;
				border: 4rpx solid #FFFFFF;
			}
		}
	}
	.hots_wrap{
		.hots_title{
			padding: 20rpx;
			text{
				border-left: 20rpx solid $color;
				padding-left: 20rpx;
				font-size: 24rpx;
				font-weight: 700;
			}
		}
		.hots_content{
			display: flex;
			flex-wrap: wrap;
			.hot_item{
				width: 33.33%;
				border: 4rpx solid #fff;
				image{}
			}
		}
	}
</style>
